{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "56db45b6",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| default_exp pico"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "80f4f9d8",
   "metadata": {},
   "source": [
    "# Pico.css components\n",
    "> Basic components for generating Pico CSS tags"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8e2d405b",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "from typing import Any\n",
    "\n",
    "from fastcore.utils import *\n",
    "from fastcore.xml import *\n",
    "from fastcore.meta import use_kwargs, delegates\n",
    "from fasthtml.components import *\n",
    "from fasthtml.xtend import *\n",
    "\n",
    "try: from IPython import display\n",
    "except ImportError: display=None"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "100414ae",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "picocss = \"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\"\n",
    "picolink = (Link(rel=\"stylesheet\", href=picocss),\n",
    "            Style(\":root { --pico-font-size: 100%; }\"))\n",
    "picocondcss = \"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.conditional.min.css\"\n",
    "picocondlink = (Link(rel=\"stylesheet\", href=picocondcss),\n",
    "                Style(\":root { --pico-font-size: 100%; }\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8a974e15",
   "metadata": {},
   "source": [
    "`picocondlink` is the class-conditional css `link` tag, and `picolink` is the regular tag."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "992c2a8f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.conditional.min.css\">\n",
       "\n",
       "<style>:root { --pico-font-size: 100%; }</style>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "show(picocondlink)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "36d26fb7",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "def set_pico_cls():\n",
    "    js = \"\"\"var sel = '.cell-output, .output_area';\n",
    "document.querySelectorAll(sel).forEach(e => e.classList.add('pico'));\n",
    "\n",
    "new MutationObserver(ms => {\n",
    "  ms.forEach(m => {\n",
    "    m.addedNodes.forEach(n => {\n",
    "      if (n.nodeType === 1) {\n",
    "        var nc = n.classList;\n",
    "        if (nc && (nc.contains('cell-output') || nc.contains('output_area'))) nc.add('pico');\n",
    "        n.querySelectorAll(sel).forEach(e => e.classList.add('pico'));\n",
    "      }\n",
    "    });\n",
    "  });\n",
    "}).observe(document.body, { childList: true, subtree: true });\"\"\"\n",
    "    return display.Javascript(js)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bfed2819",
   "metadata": {},
   "source": [
    "Run this to make jupyter outputs styled with pico:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "74326ab8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "var sel = '.cell-output, .output_area';\n",
       "document.querySelectorAll(sel).forEach(e => e.classList.add('pico'));\n",
       "\n",
       "new MutationObserver(ms => {\n",
       "  ms.forEach(m => {\n",
       "    m.addedNodes.forEach(n => {\n",
       "      if (n.nodeType === 1) {\n",
       "        var nc = n.classList;\n",
       "        if (nc && (nc.contains('cell-output') || nc.contains('output_area'))) nc.add('pico');\n",
       "        n.querySelectorAll(sel).forEach(e => e.classList.add('pico'));\n",
       "      }\n",
       "    });\n",
       "  });\n",
       "}).observe(document.body, { childList: true, subtree: true });"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "set_pico_cls()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ad99a758",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "@delegates(ft_hx, keep=True)\n",
    "def Card(*c, header=None, footer=None, **kwargs)->FT:\n",
    "    \"A PicoCSS Card, implemented as an Article with optional Header and Footer\"\n",
    "    if header: c = (Header(header),) + c\n",
    "    if footer: c += (Footer(footer),)\n",
    "    return Article(*c, **kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "95ea9527",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<article>\n",
       "  <header><p>head</p>\n",
       "</header>\n",
       "body\n",
       "  <footer><p>foot</p>\n",
       "</footer>\n",
       "</article>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "show(Card('body', header=P('head'), footer=P('foot')))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6108b84c",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "@delegates(ft_hx, keep=True)\n",
    "def Group(*c, **kwargs)->FT:\n",
    "    \"A PicoCSS Group, implemented as a Fieldset with role 'group'\"\n",
    "    return Fieldset(*c, role=\"group\", **kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "af029bf2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<fieldset role=\"group\">\n",
       "  <input>\n",
       "  <button>Save</button>\n",
       "</fieldset>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "show(Group(Input(), Button(\"Save\")))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e12b6a7c",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "@delegates(ft_hx, keep=True)\n",
    "def Search(*c, **kwargs)->FT:\n",
    "    \"A PicoCSS Search, implemented as a Form with role 'search'\"\n",
    "    return Form(*c, role=\"search\", **kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a9c38825",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<form enctype=\"multipart/form-data\" role=\"search\">\n",
       "  <input type=\"search\">\n",
       "  <button>Search</button>\n",
       "</form>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "show(Search(Input(type=\"search\"), Button(\"Search\")))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "24c4843f",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "@delegates(ft_hx, keep=True)\n",
    "def Grid(*c, cls='grid', **kwargs)->FT:\n",
    "    \"A PicoCSS Grid, implemented as child Divs in a Div with class 'grid'\"\n",
    "    c = tuple(o if isinstance(o,list) else Div(o) for o in c)\n",
    "    return ft_hx('div', *c, cls=cls, **kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0f13c619",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"grid\">\n",
       "  <div><input type=\"color\" value=\"#e66465\">\n",
       "</div>\n",
       "  <div><input type=\"color\" value=\"#53d2c5\">\n",
       "</div>\n",
       "  <div><input type=\"color\" value=\"#f6b73c\">\n",
       "</div>\n",
       "</div>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "colors = [Input(type=\"color\", value=o) for o in ('#e66465', '#53d2c5', '#f6b73c')]\n",
    "show(Grid(*colors))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "252a9f5f",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "@delegates(ft_hx, keep=True)\n",
    "def DialogX(*c, open=None, header=None, footer=None, id=None, **kwargs)->FT:\n",
    "    \"A PicoCSS Dialog, with children inside a Card\"\n",
    "    card = Card(*c, header=header, footer=footer, **kwargs)\n",
    "    return Dialog(card, open=open, id=id)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9dccbc6a",
   "metadata": {},
   "outputs": [],
   "source": [
    "hdr = Div(Button(aria_label=\"Close\", rel=\"prev\"), P('confirm'))\n",
    "ftr = Div(Button('Cancel', cls=\"secondary\"), Button('Confirm'))\n",
    "d = DialogX('thank you!', header=hdr, footer=ftr, open=None, id='dlgtest')\n",
    "# use js or htmx to display modal"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d6e96966",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "@delegates(ft_hx, keep=True)\n",
    "def Container(*args, **kwargs)->FT:\n",
    "    \"A PicoCSS Container, implemented as a Main with class 'container'\"\n",
    "    return Main(*args, cls=\"container\", **kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "138dc298",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "def PicoBusy():\n",
    "    return (HtmxOn('beforeRequest', \"event.detail.elt.setAttribute('aria-busy', 'true' )\"),\n",
    "            HtmxOn('afterRequest',  \"event.detail.elt.setAttribute('aria-busy', 'false')\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "474e14b4",
   "metadata": {},
   "source": [
    "# Export -"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d211e8e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "#|hide\n",
    "import nbdev; nbdev.nbdev_export()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0a942593",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "python3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
